<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :search.sync="search"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      :before-open="beforeOpen"
      :page="page"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.user_delete"
          @click="handleDelete"
          >删 除
        </el-button>
        <el-button
          type="info"
          size="small"
          plain
          v-if="userInfo.authority.includes('admin')"
          icon="el-icon-user"
          @click="handleGrant"
          >角色配置
        </el-button>
        <el-button
          type="primary"
          size="small"
          plain
          v-if="permission.user_reset"
          icon="el-icon-refresh"
          @click="handleReset"
          >密码重置
        </el-button>
        <el-button
          type="primary"
          size="small"
          plain
          v-if="schoolType == 9"
          icon="el-icon-refresh"
          @click="wxUnbind"
          >微信用户解绑
        </el-button>
        <el-button
          type="success"
          size="small"
          plain
          v-if="
            userInfo.authority.includes('admin') ||
            userInfo.authority.includes('心理老师')
          "
          icon="el-icon-upload2"
          @click="handleImport"
          >导入
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          v-if="
            userInfo.authority.includes('admin') ||
            userInfo.authority.includes('心理老师')
          "
          icon="el-icon-download"
          @click="handleExport"
          >导出
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="roleId">
        <el-tag>{{ row.roleName }}</el-tag>
      </template>
      <template slot-scope="{ row }" slot="deptId">
        <el-tag>{{ row.deptName }}</el-tag>
      </template>
      <template slot-scope="{ row, index }" slot="menu">
        <el-button
          v-if="filterPermission(row)"
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="update(row, index)"
          >编 辑
        </el-button>
        <el-button
          v-if="filterPermission(row)"
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="rowDel(row, index)"
          >删 除
        </el-button>
      </template>
    </avue-crud>
    <el-dialog
      title="用户角色配置"
      append-to-body
      :visible.sync="roleBox"
      width="345px"
    >
      <el-tree
        :data="roleGrantList"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="treeRole"
        :default-checked-keys="roleTreeObj"
        :props="props"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="roleBox = false">取 消</el-button>
        <el-button type="primary" @click="submitRole">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="用户数据导入"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
    >
      <avue-form
        :option="excelOption"
        v-model="excelForm"
        :upload-after="uploadAfter"
      >
        <template slot="excelTemplate">
          <el-button type="primary" @click="handleTemplate()">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </template>
      </avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getList,
  getUser,
  remove,
  update,
  add,
  grant,
  resetPassword,
  getTenantList,
  wxUnbindOpenId,
} from "@/api/system/user";
import { getDeptTree } from "@/api/system/dept";
import { getRoleTree } from "@/api/system/role";
import { getPostList } from "@/api/system/post";
import { mapGetters } from "vuex";
import website from "@/config/website";
import { getToken } from "@/util/auth";

export default {
  data() {
    const validateCardNo = (rule, value, callback) => {
      // const parCarno = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!value) {
        callback(new Error("请输入身份证号"));
      }
      // else if (value && !parCarno.test(value)) {
      //   callback(new Error("请正确输入身份证号"));
      // }
      else {
        callback();
      }
    };
    return {
      form: {},
      search: {},
      roleBox: false,
      excelBox: false,
      loading: true,
      selectionList: [],
      query: {},
      dicData: {
        deptId: [],
        roleId: [],
        postId: [],
      },
      tenant_List: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      init: {
        roleTree: [],
        deptTree: [],
      },
      props: {
        label: "title",
        value: "key",
      },
      roleGrantList: [],
      roleTreeObj: [],
      option: {
        height: "auto",
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: true,
        dialogClickModal: false,
        delBtn: false,
        editBtn: false,
        selectable: (row) => {
          if (this.userInfo.tenantId == "000000" && row.account == "admin") {
            return false;
          }
          if (this.userInfo.account !== "admin") {
            if (row.account == "admin" || row.account == this.userInfo.account)
              return false;
          }

          return true;
        },
        column: [
          {
            label: "登录账号",
            prop: "account",
            search: true,
            display: false,
            overHidden: true,
          },
          {
            label: "用户姓名",
            prop: "realName",
            search: true,
            display: false,
          },
          {
            label: "学号",
            prop: "code",
            display: false,
          },
          {
            label: "用户性别",
            prop: "sex",
            type: "select",
            dicData: [
              {
                label: "男",
                value: 1,
              },
              {
                label: "女",
                value: 2,
              },
            ],
            display: false,
          },
          {
            label: "手机号码",
            prop: "phone",
            display: false,
            overHidden: true,
          },
          {
            label: "身份证号",
            prop: "cardNo",
            display: false,
            overHidden: true,
          },
          {
            label: "账号状态",
            prop: "status",
            type: "select",
            dicData: [
              {
                label: "有效",
                value: 1,
              },
              {
                label: "失效",
                value: 0,
              },
            ],
            display: false,
          },
          {
            label: "所属租户",
            prop: "tenantName",
            // search: true,
            display: false,
            overHidden: true,
          },
          {
            label: "所属角色",
            prop: "roleName",
            display: false,
          },
          {
            label: "所属部门",
            prop: "deptName",
            display: false,
            overHidden: true,
          },
          {
            label: "年级",
            prop: "gradeId",
            type: "select",
            display: false,
            overHidden: true,
            searchLabelWidth: 120,
            props: {
              label: "gradeName",
              value: "gradeNo",
            },
            dicUrl: `/api/blade-system/grade/list`,
          },
          {
            label: "班级",
            prop: "classNo",
            rules: [
              {
                required: true,
                message: "请输入所属班级",
                trigger: "click",
              },
            ],
            display: false,
          },
          {
            label: "所属岗位",
            prop: "postName",
            display: false,
          },
          {
            label: "微信用户",
            prop: "openId",
            display: false,
            hide: this.hidePrice(),
          },
        ],
        group: [
          {
            label: "用户信息",
            prop: "jbxx",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "登录账号",
                prop: "account",
                editDisabled: true,
                rules: [
                  {
                    required: true,
                    message: "请输入登录账号",
                    trigger: "blur",
                  },
                ],
                span: website.tenantMode ? 12 : 24,
              },
              {
                label: "用户姓名",
                prop: "realName",
                rules: [
                  {
                    required: true,
                    message: "请输入用户姓名",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "学号",
                prop: "code",
                editDisplay: true,
                viewDisplay: true,
              },
              {
                label: "用户性别",
                prop: "sex",
                type: "select",
                dicData: [
                  {
                    label: "男",
                    value: 1,
                  },
                  {
                    label: "女",
                    value: 2,
                  },
                ],
                rules: [
                  {
                    required: true,
                    message: "请输选择所用户性别",
                    trigger: "click",
                  },
                ],
              },
              {
                label: "身份证号",
                prop: "cardNo",
                editDisabled: true,
                hide: true,
                overHidden: true,
                rules: [
                  {
                    required: true,
                    validator: validateCardNo,
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "手机号码",
                prop: "phone",
                overHidden: true,
                // rules: [
                //   { required: true, validator: validatePhone, trigger: "blur" },
                // ],
              },
              {
                label: "账号状态",
                prop: "status",
                hide: true,
                type: "select",
                dicData: [
                  {
                    label: "有效",
                    value: 1,
                  },
                  {
                    label: "失效",
                    value: 0,
                  },
                ],
              },
            ],
          },
          {
            label: "权限信息",
            prop: "qhxx",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "所属租户",
                prop: "tenantId",
                type: "tree",
                multiple: true,
                selectionChange: () => {},
                dicUrl: "/api/blade-system/tenant/select",
                props: {
                  label: "tenantName",
                  value: "tenantId",
                },
                hide: !website.tenantMode,
                addDisplay: website.tenantMode,
                editDisplay: website.tenantMode,
                viewDisplay: website.tenantMode,
                search: false,
                rules: [
                  {
                    required: true,
                    message: "请输入所属租户",
                    trigger: "click",
                  },
                ],
              },
              {
                label: "所属角色",
                prop: "roleId",
                multiple: true,
                leafOnly: true,
                type: "tree",
                dicData: [],
                props: {
                  label: "title",
                },
                slot: true,
                checkStrictly: true,
                rules: [
                  {
                    required: true,
                    message: "请选择所属角色",
                    trigger: "click",
                  },
                ],
              },
              {
                label: "所属部门",
                prop: "deptId",
                type: "tree",
                multiple: true,
                leafOnly: true,
                dicData: [],
                props: {
                  label: "title",
                },
                slot: true,
                checkStrictly: true,
                rules: [
                  {
                    required: true,
                    message: "请选择所属部门",
                    trigger: "click",
                  },
                ],
              },
              {
                label: "年级",
                prop: "gradeId",
                type: "select",
                overHidden: true,
                searchLabelWidth: 120,
                props: {
                  label: "gradeName",
                  value: "gradeNo",
                },
                dicUrl: `/api/blade-system/grade/list`,
              },
              {
                label: "班级",
                prop: "classNo",
                span: 12,
              },
              {
                label: "所属岗位",
                prop: "postId",
                type: "tree",
                multiple: true,
                leafOnly: true,
                dicData: [],
                props: {
                  label: "postName",
                  value: "id",
                },
                slot: true,
                checkStrictly: true,
                rules: [
                  {
                    required: true,
                    message: "请选择所属岗位",
                    trigger: "click",
                  },
                ],
              },
            ],
          },
        ],
      },
      data: [],
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "模板上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "模板上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/blade-user/import-user",
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },
      userInfo: {},
    };
  },
  watch: {
    "form.tenantId"() {
      this.buildQuanxian(this.form.tenantId);
    },
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.user_add, false),
        viewBtn: this.vaildData(this.permission.user_view, false),
        delBtn: this.vaildData(this.permission.user_delete, false),
        editBtn: this.vaildData(this.permission.user_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    accounts() {
      let accounts = [];
      this.selectionList.forEach((ele) => {
        accounts.push(ele.account);
      });
      return accounts.join(",");
    },
    schoolType() {
      return this.userInfo.schoolType;
    },
  },
  created() {
    let info = JSON.parse(localStorage.getItem("saber-userInfo")).content;
    this.userInfo = info;
    getTenantList().then((res) => {
      this.tenant_List = res.data.data;
    });
  },
  methods: {
    submitRole() {
      const roleList = this.$refs.treeRole.getCheckedKeys().join(",");
      grant(this.ids, roleList).then(() => {
        this.roleBox = false;
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.onLoad(this.page);
      });
    },
    getChild(list, tenantId, target) {
      const result = [];
      if (!list || list.length == 0) return "";
      for (let k = 0; k < list.length; k++) {
        let item = list[k];
        if (item.tenantId == tenantId) {
          let children = item.children;
          for (let j = 0; j < children.length; j++) {
            if (children[j].hasChildren) {
              let chil_dren = children[j].children;
              for (let h = 0; h < chil_dren.length; h++) {
                if (target.indexOf(chil_dren[h].id) > -1) {
                  result.push(chil_dren[h].id);
                }
              }
            } else {
              if (target.indexOf(children[j].id) > -1) {
                result.push(children[j].id);
              }
            }
          }
        }
      }
      return result.join(",");
    },
    rowSave(row, done, loading) {
      const tenantId = row.tenantId;
      const userList = [];
      if (tenantId.length > 1) {
        for (let i = 0; i < tenantId.length; i++) {
          let user = JSON.parse(JSON.stringify(row));
          user.tenantId = tenantId[i];

          let deptId = this.getChild(
            this.dicData.deptId,
            user.tenantId,
            row.deptId
          );
          user.deptId = deptId;

          let roleId = this.getChild(
            this.dicData.roleId,
            user.tenantId,
            row.roleId
          );
          user.roleId = roleId;

          let postId = this.getChild(
            this.dicData.postId,
            user.tenantId,
            row.postId
          );
          user.postId = postId;

          userList.push(user);
        }
      } else {
        row.tenantId = row.tenantId.join(",");
        row.deptId = row.deptId.join(",");
        row.roleId = row.roleId.join(",");
        row.postId = row.postId.join(",");
        userList.push(row);
      }
      add(userList).then(
        () => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    update(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    rowUpdate(row, index, done, loading) {
      const tenantId = row.tenantId;
      const userList = [];
      if (tenantId.length > 1) {
        for (let i = 0; i < tenantId.length; i++) {
          let user = JSON.parse(JSON.stringify(row));
          user.tenantId = tenantId[i];

          let deptId = this.getChild(
            this.dicData.deptId,
            user.tenantId,
            row.deptId
          );
          user.deptId = deptId;

          let roleId = this.getChild(
            this.dicData.roleId,
            user.tenantId,
            row.roleId
          );
          user.roleId = roleId;

          let postId = this.getChild(
            this.dicData.postId,
            user.tenantId,
            row.postId
          );
          user.postId = postId;

          userList.push(user);
        }
      } else {
        row.tenantId = row.tenantId.join(",");
        row.deptId = row.deptId.join(",");
        row.roleId = row.roleId.join(",");
        row.postId = row.postId.join(",");
        const { cardNo } = row;
        row.cardNo = cardNo.includes("*") ? "" : cardNo;
        userList.push({ ...row });
      }

      /*row.deptId = row.deptId.join(",");
        row.roleId = row.roleId.join(",");
        row.postId = row.postId.join(",");*/
      update(userList).then(
        () => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {});
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    handleReset() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择账号密码重置为123456?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return resetPassword(this.ids);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    wxUnbind() {
      console.log(this.accounts);
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择账号所绑定的微信用户解绑吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return wxUnbindOpenId(this.accounts);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs.crud.toggleSelection();
        });
    },
    handleGrant() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.roleTreeObj = [];
      if (this.selectionList.length === 1) {
        this.roleTreeObj = this.selectionList[0].roleId.split(",");
      }
      getRoleTree().then((res) => {
        this.roleGrantList = res.data.data;
        this.roleBox = true;
      });
    },
    handleImport() {
      this.excelBox = true;
    },
    uploadAfter(res, done, loading, column) {
      window.console.log(column);
      done();
      this.excelBox = false;
      this.refreshChange();
    },
    handleExport() {
      this.$confirm("是否导出用户数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/blade-user/export-user?blade-auth=${getToken()}&account=${
            this.search.account
          }&realName=${this.search.realName}`
        );
      });
    },
    handleTemplate() {
      window.open(`/api/blade-user/export-template?blade-auth=${getToken()}`);
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        if (this.form.hasOwnProperty("tenantId")) {
          this.form.tenantId = this.form.tenantId.split(",");
        }
        if (this.form.hasOwnProperty("deptId")) {
          this.form.deptId = this.form.deptId.split(",");
        }
        if (this.form.hasOwnProperty("roleId")) {
          this.form.roleId = this.form.roleId.split(",");
        }
        if (this.form.hasOwnProperty("postId")) {
          this.form.postId = this.form.postId.split(",");
        }
        /*getUser(this.form.id).then(res => {
            this.form = res.data.data;
            if(this.form.hasOwnProperty("tenantId")){
		          this.form.tenantId = this.form.tenantId.split(",");
		        }
            if(this.form.hasOwnProperty("deptId")){
              this.form.deptId = this.form.deptId.split(",");
            }
            if(this.form.hasOwnProperty("roleId")){
              this.form.roleId = this.form.roleId.split(",");
            }
            if(this.form.hasOwnProperty("postId")){
              this.form.postId = this.form.postId.split(",");
            }
          });*/
      }
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    buildQuanxian(tenantId) {
      let formTenantId = [];
      if (typeof tenantId == "string") {
        formTenantId.push(tenantId);
      } else {
        formTenantId = tenantId;
      }

      if (formTenantId && formTenantId.length > 0) {
        this.dicData = {
          deptId: [],
          roleId: [],
          postId: [],
        };
        const _this = this;
        for (let i = 0; i < formTenantId.length; i++) {
          let tenantId = formTenantId[i];
          let tenantObj = this.tenant_List.find(
            (value) => value.tenantId == tenantId
          );
          let tenantName = tenantObj.tenantName;
          const column_deptId = this.findObject(this.option.group, "deptId");
          const column_roleId = this.findObject(this.option.group, "roleId");
          const column_postId = this.findObject(this.option.group, "postId");
          const callBack = (tenantId, tenantName) => {
            getDeptTree(tenantId).then((res) => {
              if (
                !_this.dicData.deptId.find(
                  (value) => value.tenantId == tenantId
                )
              ) {
                const dic = {
                  title: tenantName,
                  tenantId: tenantId,
                  children: res.data.data,
                };
                _this.dicData.deptId.push(dic);
              }
              column_deptId.dicData = _this.dicData.deptId;
            });
            getRoleTree(tenantId).then((res) => {
              if (
                !_this.dicData.roleId.find(
                  (value) => value.tenantId == tenantId
                )
              ) {
                const dic = {
                  title: tenantName,
                  tenantId: tenantId,
                  children: res.data.data,
                };
                _this.dicData.roleId.push(dic);
              }
              column_roleId.dicData = _this.dicData.roleId;
            });
            getPostList(tenantId).then((res) => {
              if (
                !_this.dicData.postId.find(
                  (value) => value.tenantId == tenantId
                )
              ) {
                const dic = {
                  postName: tenantName,
                  tenantId: tenantId,
                  children: res.data.data,
                };
                _this.dicData.postId.push(dic);
              }
              column_postId.dicData = _this.dicData.postId;
            });
          };
          callBack(tenantId, tenantName);
        }
      }
    },
    filterPermission(row) {
      if (this.userInfo.tenantId == "000000" && row.account == "admin") {
        return false;
      }
      if (this.userInfo.account !== "admin") {
        if (row.account == "admin" || row.account == this.userInfo.account)
          return false;
      }

      return true;
    },
    hidePrice() {
      const type =
        this.schoolType ||
        JSON.parse(localStorage.getItem("saber-userInfo")).content.schoolType ||
        "";
      if (type != "9") {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style></style>
